<template>
  <div class="nav-tab">
    <!-- 左侧轮播显示区域 -->
    <div class="classfiy">
      <div v-for="(item,index) in list[leftIndex].tabList" :key="index" class="classfiy-item">
        <img :src="item.url" alt />
        <div class="class-name">{{ item.title }}</div>
        <div class="class-cont">{{ item.content }}</div>
      </div>
    </div>
    <div v-if="list[leftIndex].tabList.length===0" class="image-mask">导航菜单</div>
    <!-- 右侧轮播编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightImg">
        <!-- 头部提示区域 -->
        <header class="title">
          导航菜单设置
          <div class="help-text">建议图片尺寸为36x36px，支持 jpg/png/gif 格式，大小不超过2MB</div>
        </header>
        <div class="editCon">
          <div
            v-for="(item,index) in list[leftIndex].tabList"
            :key="index"
            :class="rightIndex === index ? 'border' : ''"
            class="add_image"
            @click="right_click(index)"
          >
            <!-- 删除按钮 -->
            <img
              v-if="rightIndex === index"
              src="../../../../assets/settinyschool/delete.png"
              class="close"
              alt
              @click="close(index,item.id)"
            />
            <div class="image">
              <!--无图片-->
              <div v-if="!list[leftIndex].tabList[index].url">
                <div v-if="list[leftIndex].tabList[index]">+添加图片</div>
              </div>
              <!--有图片-->
              <div v-else class="showImage">
                <img :src="item.url" alt />
              </div>
              <el-upload
                :file-list="fileList"
                :on-change="handleLogoChange"
                :http-request="uploadLogoFile"
                class="upload-demo"
                action
              >
                <el-button size="small" type="primary" class="uploadBtn">点击上传</el-button>
              </el-upload>
            </div>
            <div>
              <div>
                <span style="width:50px;">标题：</span>
                <el-input v-model="item.title" maxlength="10" size="mini" style="width:130px;" />
              </div>
              <div style="margin-top:10px;">
                <span style="width:50px;">内容：</span>
                <el-input v-model="item.content" maxlength="10" size="mini" style="width:130px;" />
              </div>
              <div style="margin-top:10px;">
                <span style="width:50px;">链接：</span>
                <el-input v-model="item.link" size="mini" style="width:130px;" />
              </div>
            </div>
          </div>
          <el-button
            v-if="list[leftIndex].tabList.length < 5"
            icon="el-icon-circle-plus"
            class="add_ad"
            style="width:100%;margin:5px 0;"
            @click="add_ad()"
          >添加一个导航栏</el-button>
        </div>
      </div>
    </div>
    <!-- 轮播链接选择课程弹框 -->
    <el-dialog :visible.sync="courseDialogVisible" title="选择课程" width="50%">
      <div>
        <span style="width:100px;">选择班级：</span>
        <el-autocomplete
          v-model="keyWord"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          style="width:300px;"
          @select="handleSelect"
        />
      </div>
      <el-table :data="linkTableData" stripe style="width: 100%">
        <el-table-column prop="name" label="班级名称" />
        <el-table-column prop="price" label="商品价格" />
        <el-table-column prop="number" label="商品数量" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="removeLink(scope.$index)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="courseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="courseConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 轮播链接选择班级弹框 -->
    <el-dialog :visible.sync="classDialogVisible" title="选择班级" width="50%">
      <div>
        <span style="width:100px;">选择班级：</span>
        <el-autocomplete
          v-model="keyWord"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          style="width:300px;"
          @select="handleSelect"
        />
      </div>
      <el-table :data="linkTableData" stripe style="width: 100%">
        <el-table-column prop="name" label="班级名称" />
        <el-table-column prop="price" label="商品价格" />
        <el-table-column prop="number" label="商品数量" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="removeLink(scope.$index)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="classDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="classConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { upLoadFile } from '@/api/upLoadFile' // 数据接口
import { delTab } from '@/api/system/mobile_assembly'

export default {
  props: ['list', 'leftIndex'],
  data() {
    return {
      rightIndex: 0,
      fileList: [],
      keyWord: '',
      courseDialogVisible: false,
      classDialogVisible: false,
      logofile: '',
      linkTableData: [
        // {
        //   name: 'class NO.1',
        //   price: '2',
        //   number: '2',
        //   createTime: '2'
        // }
      ]
    }
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    handleLogoChange(file) {
      this.logofile = file.raw
    },
    uploadLogoFile() {
      const fileForm = new FormData();
      fileForm.append('name', this.logofile.name);
      fileForm.append('uid', this.logofile.uid);
      fileForm.append('file', this.logofile);
      upLoadFile(fileForm).then(response => {
        this.list[this.leftIndex].tabList[this.rightIndex].url =
          response.data.url
      })
    },
    right_click(index) {
      var that = this;
      that.rightIndex = index
    },
    // 图片添加至list中
    add_ad() {
      this.list[this.leftIndex].tabList.push({
        url: '',
        title: '',
        link: ''
      })
    },
    // 删图片
    close(index, id) {
      console.log('id:' + id);
      if (id) {
        delTab(id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.list[this.leftIndex].tabList.splice(index, 1)
        })
      } else {
        this.list[this.leftIndex].tabList.splice(index, 1)
      }
    },
    // 图片上传
    beforeAvatarUpload(file) {
      const isImg = file.type === 'image/jpeg' || 'image/png' || 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImg) {
        this.$message.error('上传头像图片只能是 JPG/PNG/GIG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isImg && isLt2M
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1)
    },
    uploadSuccess(res, file, fileList) {
      this.list[this.leftIndex].tabList[
        this.rightIndex
      ].url = URL.createObjectURL(file.raw)
    },
    // 添加链接
    handleCommand(command) {
      if (command === 'course') {
        this.courseDialogVisible = true
      }
      if (command === 'class') {
        this.classDialogVisible = true
      }
      if (command === 'member') {
        this.list[this.leftIndex].tabList[this.rightIndex].link = '会员专区'
      }
    },
    loadAll() {
      return [{ value: 'class NO.1', price: '2', number: '2', createTime: '2' }]
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    handleSelect(item) {
      if (this.linkTableData.length > 0) {
        this.$message({
          message: '只能添加一个链接',
          type: 'warning'
        });
        return
      }
      this.linkTableData.push({
        name: item.value,
        price: item.price,
        number: item.number,
        createTime: item.createTime
      })
    },
    // 链接标签删除
    handleTagClose() {
      this.list[this.leftIndex].tabList[this.rightIndex].link = ''
    },

    // 移除链接列表
    removeLink(index) {
      this.linkTableData.splice(index, 1)
    },
    // 选择课程确认
    courseConfirm() {
      if (this.linkTableData.length === 0) {
        this.courseDialogVisible = false;
        return
      }
      this.list[this.leftIndex].tabList[
        this.rightIndex
      ].link = this.linkTableData[0].name;
      this.courseDialogVisible = false;
      this.linkTableData = [];
      this.keyWord = ''
    },
    // 选择班级确认
    classConfirm() {
      if (this.linkTableData.length === 0) {
        this.classDialogVisible = false;
        return
      }
      this.list[this.leftIndex].tabList[
        this.rightIndex
      ].link = this.linkTableData[0].name;
      this.classDialogVisible = false;
      this.linkTableData = [];
      this.keyWord = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.nav-tab {
  .image-mask {
    width: 100%;
    height: 100%;
    background-color: #e1e1e1;
    font-size: 26px;
    color: #919191;
    font-weight: 700;
    text-align: center;
    line-height: 194px;
  }

  .haveImg {
    position: relative;
    width: 100%;
    height: 194px;

    /deep/ .el-carousel__container {
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .showImgTitle {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      height: 40px;
      line-height: 30px;
      padding: 5px 10px;
      color: #fff;
      background: rgba($color: #000, $alpha: 0.5);
    }
  }

  .classfiy {
    // display: flex;
    // flex-wrap: wrap;
    // align-items: center;
    padding: 10px;
padding-bottom: 0;
    .classfiy-item {
      width: 31%;
      margin-right: 3%;
      margin-bottom: 10px;
      // flex-shrink: 0;
      // text-align: center;
      display: inline-block;
      position: relative;
      &:nth-child(3n) {
        margin-right: 0%;
      }

      position: relative;
      img {
        width: 100%;
      }

      .class-name {
        position: absolute;
        top: 5px;
        left: 5px;
        color: #fff;
        font-size: 18px;
      }
      .class-cont {
        position: absolute;
        top: 30px;
        left: 5px;
        color: #f0f0f0;
        font-size: 12px;
      }
    }
  }
}

.editRightImg {
  width: 400px;
  position: absolute;
  left: 105%;
  top: 0;
  padding: 10px;
  border: 1px solid #e1e1e1;
  background-color: #fafafa;

  .title {
    font-size: 14px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e1e1e1;

    .help-text {
      font-size: 12px;
      color: #616161;
      margin-top: 5px;
    }
  }

  .editCon {
    background-color: #fff;
    padding: 10px 5px;
    border: 1px solid #e1e1e1;
  }

  .add_image:after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
  }

  .add_image {
    position: relative;
    border: 1px solid rgba($color: #fff, $alpha: 0);
    padding: 10px;

    .close {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 20px;

      img {
        width: 100%;
      }
    }

    .image {
      position: relative;
      float: left;
      height: 100px;
      width: 150px;

      margin-right: 10px;
      line-height: 100px;
      text-align: center;
      background-color: #f5f5f5;

      /deep/ .uploadBtn {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }

      /deep/ .el-upload-list {
        display: none;
      }
    }

    .showImage {
      height: 100px;
      width: 150px;

      text-align: center;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .add_image.border {
    border: 1px solid #408ffb;
  }
}
</style>
